import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:love_app/common/su.dart';
import 'package:love_app/common/su_dialog.dart';
import 'package:love_app/config/setting.dart';
import 'package:love_app/enum/bind_lover.dart';
import 'package:love_app/model/home_page_model.dart' as HPModel;
import 'package:love_app/providers/share_provider.dart';
import 'package:love_app/routes/application.dart';
import 'package:love_app/routes/routes.dart';
import 'package:provider/provider.dart';

// 中间的内容
class CenterBox extends StatefulWidget {
  final HPModel.Data homePageModel;

  const CenterBox({Key key, @required this.homePageModel}) : super(key: key);

  @override
  _CenterBoxState createState() => _CenterBoxState();
}

class _CenterBoxState extends State<CenterBox> {
  ShareProvider _shareProvider; // 全局共享数据

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _shareProvider = Provider.of<ShareProvider>(context, listen: false);
  }

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      child: SingleChildScrollView(
        child: Container(
          width: Su().w(750),
          padding: EdgeInsets.only(
            top: Su().h(83),
            bottom: Su().h(40),
          ),
          child: _warpWidget(),
        ),
      ),
    );
  }

  // 网格布局
  Widget _warpWidget() {
    HPModel.Data data = widget.homePageModel;
    return Wrap(
      alignment: WrapAlignment.center,
      runSpacing: Su().h(33),
      spacing: Su().w(33),
      children: <Widget>[
        _openWebView(_getImagePath("love_tree"), "小游戏", data.meetingDaySum, "次",
            "loveTree"),
        _buildWarpItem(_getImagePath("love_card"), "打卡记录", data.meetingDaySum,
            "条", "loveCard"),
        _buildWarpItem(_getImagePath("love_register"), "恋爱记录",
            data.meetingDaySum, "次", "loveRegister"),
        _buildWarpItem(_getImagePath("love_message"), "悄悄话", data.meetingDaySum,
            "条", "chatPage"),
      ],
    );
  }

  // 获取图片完整名字
  String _getImagePath(String name) {
    return "images/home_page_img/" + name + ".png";
  }

  // 构建网格布局每一个内容
  Widget _buildWarpItem(
      String imgPath, String name, int sumNum, String typeText, String route) {
    return GestureDetector(
      onTap: () {
        BindLover bindLover = _shareProvider.bindLover;
        if (bindLover == BindLover.hasBind) {
          Application.router.navigateTo(context, "/$route", transition: TransitionType.fadeIn);
        } else {
          SuDialog.showToast("请先绑定伴侣", bgColor: Colors.black);
        }
      },
      child: _buildWarpItemChlld(imgPath, name, sumNum, typeText),
    );
  }

  // 打开webview
  Widget _openWebView(
      String imgPath, String name, int sumNum, String typeText, String route) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) => _webViewWidget(),
          ),
        );
      },
      child: _buildWarpItemChlld(imgPath, name, sumNum, typeText),
    );
  }

  void _back(){
    Navigator.pop(context);
  }

  // webViwe
  Widget _webViewWidget() {
    final String webViewUrl = Setting.LoveTrueUrl + _shareProvider.token;
    final flutterWebviewPlugin = new FlutterWebviewPlugin();
    JavascriptChannel _toastJsChannel(BuildContext context) => JavascriptChannel(
      name: 'backApp',
      onMessageReceived: (JavascriptMessage message) {
        // flutterWebviewPlugin.hide().then((value){
        //   // Navigator.pop(context);
        //   // Su.suPrints("哈哈哈");
        //   _back();
        // });
        flutterWebviewPlugin.goBack();
        // Su.suPrints("哈哈");
        // flutterWebviewPlugin.goForward();
        // _back();
        

      });
    // 创建 JavascriptChannel
    return WebviewScaffold(
      url: webViewUrl,
      withZoom: true,
      withLocalStorage: true,
      hidden: true,
      ignoreSSLErrors: true,
      withJavascript: true,
      javascriptChannels: [_toastJsChannel(context)].toSet(),
      // initialChild: Container(
      //   child: Center(
      //     child: Image.asset(
      //     "images/other/game.png",
      //     fit: BoxFit.cover,
      //   ),
      //   ),
      // ),
    );
  }

  // JavascriptChannel _toastJsChannel(BuildContext context) => JavascriptChannel(
  //     name: 'backApp',
  //     onMessageReceived: (JavascriptMessage message) {
  //       // print("get message from JS, message is: ${message.message}");
  //     });

  // 构建网格布局每一个内容
  Widget _buildWarpItemChlld(
      String imgPath, String name, int sumNum, String typeText) {
    return Container(
      width: Su().w(301),
      height: Su().h(150),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(Su().w(20)),
        boxShadow: [
          BoxShadow(
              color: Colors.black12,
              offset: Offset(0.0, 10.0), //阴影xy轴偏移量
              blurRadius: 15.0, //阴影模糊程度
              spreadRadius: 1.0 //阴影扩散程度
              )
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        // crossAxisAlignment: ,
        children: <Widget>[
          _iamge(imgPath),
          _text(name, typeText, sumNum),
        ],
      ),
    );
  }

  // 图片
  Widget _iamge(String imgPath) {
    return Padding(
      padding: EdgeInsets.only(
        left: Su().w(30),
        right: Su().w(40),
      ),
      child: Image.asset(
        imgPath,
        width: Su().w(80),
        height: Su().w(80),
      ),
    );
  }

  // 右边的文字
  Widget _text(String name, String typeText, int sumNum) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          name,
          style: Su().textStyle(Color.fromRGBO(38, 38, 38, 1), 30),
        ),
        _typeText(typeText, sumNum),
      ],
    );
  }

  // 次数文字
  Widget _typeText(String typeText, int sumNum) {
    return Text.rich(
      TextSpan(
          text: sumNum.toString(),
          style: Su().textStyle(_shareProvider.textColor, 38),
          children: [
            TextSpan(
              text: typeText,
              style: Su().textStyle(Color.fromRGBO(128, 128, 128, 1), 28),
            ),
          ]),
    );
  }
}
